<ul class="list-group list-group-flush" id="productsAccordion">
    <ng-container *ngFor="let item of items | menuRoute">
        <li class="list-group-item company-menu-item"
            [ngClass]="{'active': current == item.path && (!paths[item.path] || paths[item.path].length === 0), 'item-link': item.data.enabled && item.data.available}">
            <div class="d-flex align-items-center main-item" [attr.id]="'product'+item.path">
                <div class="mr-auto">
                    <span *ngIf="!item.data.enabled || !item.data.available">{{ item.data.menu.title }}</span>

                    <a *ngIf="item.data.enabled && item.data.available && (paths[item.path] == undefined || paths[item.path].length == 0)"
                        [attr.data-target]="'#'+item.path" aria-expanded="false" [attr.aria-controls]="item.path"
                        [routerLink]="item.path" [routerLinkActive]="[paths[item.path] && paths[item.path].length > 0 ? 'active' : '']" (click)="current = item.path">{{ item.data.menu.title }}</a>

                    <a *ngIf="paths[item.path] && paths[item.path].length > 0" href="javascript:;;" data-toggle="collapse" [attr.data-target]="'#'+item.path"
                        [attr.aria-expanded]="current === item.path ? 'true' : 'false'" [attr.aria-controls]="item.path">{{ item.data.menu.title }}</a>
                </div>
                <div *ngIf="!item.data.enabled" class="ml-auto">
                    <i class="ti-lock"></i>
                </div>
                <div *ngIf="!item.data.available" class="ml-auto">
                    <img src="/assets/icons-svg/icon-research-not-available.svg" class="unavailable-icon" />
                </div>
            </div>

            <div class="collapse pb-2" [ngClass]="{'show': current == item.path}"
                [attr.id]="item.path" [attr.aria-labelledby]="'product'+item.path" data-parent="#productsAccordion">
                <div class="submenu" *ngIf="paths[item.path] && paths[item.path].length > 0">
                    <a *ngFor="let menu of paths[item.path]" [routerLink]="menu.path" [routerLinkActive]="['active']">{{ menu.title }}</a>
                </div>
            </div>
        </li>
    </ng-container>
</ul>